<template>
  <div class="map-container">
    <div id="mychart" ref="mapWrap" class="map-wrap" style=" width: 100%; height: 700px; transform: perspective(1000px) rotateY(0deg) rotateX(0deg)" />
  </div>

</template>

<script>
import * as echarts from 'echarts'
import geoJson from '@/utils/eightCity.js'
export default {
  name: 'EtcCityMap',
  data() {
    return {
      pic1: '',
      pic2: '',
      pic3: '',
      chart: null,
      chartData: [],
    }
  },
  mounted() {
    this.initMap(this.chartData)
    window.addEventListener('resize', () => {
      this.reloadMap()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    window.removeEventListener("resize", this.resize);
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initMap(chartData) {
      this.chart = echarts.init(this.$refs.mapWrap)
      echarts.registerMap('combined', geoJson) // 绘制中国地图
      var option = {
        series: [
          // 飞线
          {
            type: 'lines',
            coordinateSystem: 'geo',
            zlevel: 14,
            polyline: false,
            roam: false,
            selectedMode: 'single', // multiple多选
            symbolSize: function (params) {
              return (params[2] / 100) * 15 + 5;
            },
            itemStyle: {
              normal: {
                areaColor: '#164091',
                borderWidth: 1.5, // 设置外层边框
                borderColor: '#9ffcff',
                color: '#000'
              }
            },
            data: [
              {
                fromName: '合肥',
                toName: '郑州',
                coords: [[117.283042, 31.86119], [113.665412, 34.757975],],
                text: '999'
              },
              {
                fromName: '合肥',
                toName: '武汉',
                coords: [[117.283042, 31.86119], [114.298572, 30.584355],],
                text: '999'
              },
              {
                fromName: '合肥',
                toName: '南京',
                coords: [[117.283042, 31.86119], [119.486506, 32.983991],],
                text: '999'
              },
              {
                fromName: '合肥',
                toName: '上海',
                coords: [[117.283042, 31.86119], [121.472644, 31.231706],],
                text: '999'
              },
              {
                fromName: '合肥',
                toName: '杭州',
                coords: [[117.283042, 31.86119], [120.153576, 30.287459],],
                text: '999'
              },
              {
                fromName: '合肥',
                toName: '南昌',
                coords: [[117.283042, 31.86119], [115.892151, 28.676493],],
                text: '999'
              },
              {
                fromName: '合肥',
                toName: '济南',
                coords: [[117.283042, 31.86119], [117.000923, 36.675807],],
                text: '999'
              }
            ],
            lineStyle: {
              color: 'rgba(249, 228, 133, 1)',
              opacity: 0.6,
              width: 1,
              type: 'dashed',
              curveness: 0.2
            },
            effect: {
              show: true,
              symbol: 'arrow',
              symbolSize: 5,
              color: 'rgba(249, 228, 133, 1)',
              symbolKeepAspect: true,
              symbolOffset: [0, 0],
              period: 5
            },
            label: {
              show: true,
              position: 'middle',
              formatter: function (params) {
                return params.data.text; // 返回数据值作为标注文字
              },
              color: '#fff',
              fontSize: 12
            },
            // zlevel: 1
          },
          // 飞线
          {
            type: 'lines',
            coordinateSystem: 'geo',
            zlevel: 14,
            polyline: false,
            data: [
              {
                fromName: '郑州',
                toName: '合肥',
                coords: [[113.665412, 34.757975], [117.283042, 31.86119],],
                text: '999'
              },
              {
                fromName: '武汉',
                toName: '合肥',
                coords: [[114.298572, 30.584355], [117.283042, 31.86119],],
                text: '999'
              },
              {
                fromName: '南京',
                toName: '合肥',
                coords: [[119.486506, 32.983991], [117.283042, 31.86119],],
                text: '999'
              },
              {
                fromName: '上海',
                toName: '合肥',
                coords: [[121.472644, 31.231706], [117.283042, 31.86119],],
                text: '999'
              },
              {
                fromName: '杭州',
                toName: '合肥',
                coords: [[120.153576, 30.287459], [117.283042, 31.86119],],
                text: '999'
              },
              {
                fromName: '南昌',
                toName: '合肥',
                coords: [[115.892151, 28.676493], [117.283042, 31.86119],],
                text: '999'
              },
              {
                fromName: '济南',
                toName: '合肥',
                coords: [[117.000923, 36.675807], [117.283042, 31.86119],],
                text: '999'
              }
            ],
            lineStyle: {
              color: 'rgba(153, 248, 186, 1)',
              opacity: 0.6,
              width: 1,
              type: 'dashed',
              curveness: 0.2
            },
            effect: {
              show: true,
              symbol: 'arrow',
              symbolSize: 5,
              color: 'rgba(153, 248, 186, 1)',
              symbolKeepAspect: true,
              symbolOffset: [0, 0],
              period: 5
            },
            label: {
              show: true,
              position: 'middle',
              formatter: function (params) {
                return params.data.text; // 返回数据值作为标注文字
              },
              color: '#fff',
              fontSize: 12
            },
            // zlevel: 1
          },
          // 飞线起始点
          {
            type: 'scatter',
            coordinateSystem: 'geo',
            zlevel: 14,
            data: [[117.283042, 31.86119], [119.486506, 32.983991], [121.472644, 31.231706], [120.153576, 30.287459],
            [115.892151, 28.676493], [114.298572, 30.584355], [113.665412, 34.757975], [117.000923, 36.675807]],
            symbolSize: 10,
            itemStyle: {
              normal: {
                color: 'rgba(153, 248, 186, 1)',
                shadowBlur: 5, // 光晕大小
                shadowColor: 'rgba(0, 0, 255, 0.5)' // 光晕颜色
              },
            },

            
          }
        ],
        geo: [
          {
            name: '图层A',
            map: 'combined',
            roam: false,
            zoom: 1.2,
            zlevel: 13,
            viewControl: {
              distance: 100,
              pitch: 130,
              rotateY: 130
          },
            regions: [
              {
                name: '安徽省',
                itemStyle: {
                  shadowBlur: 0,
                  // borderColor: 'rgba(110, 199, 255, 1)', // 设置区域块的边框颜色
                  borderWidth: 1.5, // 设置边框宽度
                  areaColor: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 1,
                    colorStops: [{
                      offset: 0, color: 'rgba(192, 227, 248, 0.99)' // 渐变起始颜色
                    }, {
                      offset: 1, color: 'rgba(9, 35, 51, 0.21)' // 渐变结束颜色
                    }]
                  }
                },
                emphasis: {
                  itemStyle: {
                    areaColor: 'rgba(37, 227, 255, 0.8)', // 设置鼠标悬停时的背景色
                    borderColor: 'rgba(110, 199, 255, 1)' // 设置鼠标悬停时的边框颜色
                  }
                }
              },
              {
                name: '江西省',
                itemStyle: {
                  shadowBlur: 0,
                  // borderColor: 'rgba(110, 199, 255, 1)', // 设置区域块的边框颜色
                  borderWidth: 1.5, // 设置边框宽度
                  areaColor: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 1,
                    colorStops: [{
                      offset: 0, color: 'rgba(192, 227, 248, 0.99)' // 渐变起始颜色
                    }, {
                      offset: 1, color: 'rgba(9, 35, 51, 0.21)' // 渐变结束颜色
                    }]
                  }
                },
                emphasis: {
                  itemStyle: {
                    areaColor: 'rgba(37, 227, 255, 0.8)', // 设置鼠标悬停时的背景色
                    borderColor: 'rgba(110, 199, 255, 1)' // 设置鼠标悬停时的边框颜色
                  }
                }
              },
              {
                name: '湖北省',
                itemStyle: {
                  shadowBlur: 0,
                  // borderColor: 'rgba(110, 199, 255, 1)', // 设置区域块的边框颜色
                  borderWidth: 1.5, // 设置边框宽度
                  areaColor: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 1,
                    colorStops: [{
                      offset: 0, color: 'rgba(192, 227, 248, 0.99)' // 渐变起始颜色
                    }, {
                      offset: 1, color: 'rgba(9, 35, 51, 0.21)' // 渐变结束颜色
                    }]
                  }
                },
                emphasis: {
                  itemStyle: {
                    areaColor: 'rgba(37, 227, 255, 0.8)', // 设置鼠标悬停时的背景色
                    borderColor: 'rgba(110, 199, 255, 1)' // 设置鼠标悬停时的边框颜色
                  }
                }
              },
              {
                name: '浙江省',
                itemStyle: {
                  shadowBlur: 0,
                  // borderColor: 'rgba(110, 199, 255, 1)', // 设置区域块的边框颜色
                  borderWidth: 1.5, // 设置边框宽度
                  areaColor: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 1,
                    colorStops: [{
                      offset: 0, color: 'rgba(192, 227, 248, 0.99)' // 渐变起始颜色
                    }, {
                      offset: 1, color: 'rgba(9, 35, 51, 0.21)' // 渐变结束颜色
                    }]
                  }
                },
                emphasis: {
                  itemStyle: {
                    areaColor: 'rgba(37, 227, 255, 0.8)', // 设置鼠标悬停时的背景色
                    borderColor: 'rgba(110, 199, 255, 1)' // 设置鼠标悬停时的边框颜色
                  }
                }
              },
              {
                name: '上海市',
                itemStyle: {
                  shadowBlur: 0,
                  // borderColor: 'rgba(110, 199, 255, 1)', // 设置区域块的边框颜色
                  borderWidth: 1.5, // 设置边框宽度
                  areaColor: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 1,
                    colorStops: [{
                      offset: 0, color: 'rgba(192, 227, 248, 0.99)' // 渐变起始颜色
                    }, {
                      offset: 1, color: 'rgba(9, 35, 51, 0.21)' // 渐变结束颜色
                    }]
                  }
                },
                emphasis: {
                  itemStyle: {
                    areaColor: 'rgba(37, 227, 255, 0.8)', // 设置鼠标悬停时的背景色
                    borderColor: 'rgba(110, 199, 255, 1)' // 设置鼠标悬停时的边框颜色
                  }
                }
              },
              {
                name: '山东省',
                itemStyle: {
                  shadowBlur: 0,
                  // borderColor: 'rgba(110, 199, 255, 1)', // 设置区域块的边框颜色
                  borderWidth: 1.5, // 设置边框宽度
                  areaColor: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 1,
                    colorStops: [{
                      offset: 0, color: 'rgba(192, 227, 248, 0.99)' // 渐变起始颜色
                    }, {
                      offset: 1, color: 'rgba(9, 35, 51, 0.21)' // 渐变结束颜色
                    }]
                  }
                },
                emphasis: {
                  itemStyle: {
                    areaColor: 'rgba(37, 227, 255, 0.8)', // 设置鼠标悬停时的背景色
                    borderColor: 'rgba(110, 199, 255, 1)' // 设置鼠标悬停时的边框颜色
                  }
                }
              },
              {
                name: '河南省',
                itemStyle: {
                  shadowBlur: 0,
                  // borderColor: 'rgba(110, 199, 255, 1)', // 设置区域块的边框颜色
                  borderWidth: 1.5, // 设置边框宽度
                  areaColor: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 1,
                    colorStops: [{
                      offset: 0, color: 'rgba(192, 227, 248, 0.99)' // 渐变起始颜色
                    }, {
                      offset: 1, color: 'rgba(9, 35, 51, 0.21)' // 渐变结束颜色
                    }]
                  }
                },
                emphasis: {
                  itemStyle: {
                    areaColor: 'rgba(37, 227, 255, 0.8)', // 设置鼠标悬停时的背景色
                    borderColor: 'rgba(110, 199, 255, 1)' // 设置鼠标悬停时的边框颜色
                  }
                }
              },
              {
                name: '江苏省',
                itemStyle: {
                  shadowBlur: 0,
                  // borderColor: 'rgba(110, 199, 255, 1)', // 设置区域块的边框颜色
                  borderWidth: 1.5, // 设置边框宽度
                  areaColor: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 1,
                    colorStops: [{
                      offset: 0, color: 'rgba(192, 227, 248, 0.99)' // 渐变起始颜色
                    }, {
                      offset: 1, color: 'rgba(9, 35, 51, 0.21)' // 渐变结束颜色
                    }]
                  }
                },
                emphasis: {
                  itemStyle: {
                    areaColor: 'rgba(37, 227, 255, 0.8)', // 设置鼠标悬停时的背景色
                  }
                }
              },
            ],
            label: {
              show: true,
              fontSize: "16",
              color: '#FFF',
            },
            itemStyle: {
              borderColor: 'rgba(110, 199, 255, 1)',
              borderWidth: 2,
              shadowBlur: 5,
              shadowColor: '#66edff',

            },
            emphasis: {
              itemStyle: {
                shadowBlur: 5,
                borderWidth: 2,
              },

            },

          },
          {
            name: '图层B',
            map: 'combined',
            roam: false,
            zoom: 1.2,
            z: 2,
            regions: [

            ],
            itemStyle: {
              // borderColor: 'rgba(110, 199, 255, 1)',
              borderWidth: 0,
              shadowBlur: 0,
              shadowColor: 'rgba(110, 199, 255, 1)',
              shadowOffsetX: -6,
              shadowOffsetY: 0
            },


          }
        ],
        grid3D: {
          viewControl: {
            alpha: 100,
            beta: 100
          }
        }

      };
      echarts.registerMap('combined', geoJson) // 绘制中国地图
      this.chart.setOption(option);
    },
    // 重新加载地图
    reloadMap() {
      if (!this.chart) {
        return
      }
      this.chart.dispose()
      this.chart = null
      this.initMap(this.chartData)
    }
  }
}
</script>

<style lang="scss" scoped>
.map-container {
  position: relative;
  width: 100%;
  height: 100%;

  .map-wrap {
    width: 100%;
    height: 700px;
  }

  .layer-wrap {
    position: absolute;
    left: 40%;
    top: 20%;
    width: 246px;
    height: 242px;
    padding: 20px 15px;
    box-sizing: border-box;

    .tit {
      width: 100%;
      height: 32px;
      line-height: 32px;
      display: flex;
      justify-content: space-between;
      color: #fff;

      .city {
        font-size: 18px;
        font-family: 'Microsoft YaHei';
        font-weight: bold;
        color: #FFFFFF;
        line-height: 26px;
      }

      .icon-close {
        font-size: 20px;
        position: absolute;
        right: 20px;
        top: 15px;
        cursor: pointer;
      }
    }

    .user-info {
      width: 100%;
      height: 24px;
      line-height: 24px;
      font-size: 14px;
      color: #ABE6FF;
      display: flex;

      .compare {
        margin-left: 20px;

        .num {
          color: #3AFF97;
        }
      }
    }

    .user-num {
      height: 36px;
      line-height: 36px;
      color: #fff;
      display: flex;

      .num {
        font-size: 30px;
        font-weight: bold;
        letter-spacing: 5px;
      }
    }

    .user-list {
      width: 100%;

      .item {
        width: 100%;
        height: 25px;
        line-height: 25px;
        font-size: 14px;
        color: #fff;
        display: flex;

        .name {
          width: 90px;
        }

        .num {
          margin-left: 15px;
        }
      }
    }
  }
}

.infor {
  position: absolute;
  bottom: 80px;
  left: 10px;
  color: #fff;
  width: 191px;
  height: 106px;
  border-top: 2px solid #0B69A1;
  border-bottom: 13px solid rgba(50, 200, 255, 0.3);
  background: linear-gradient(0deg, rgba(1, 11, 48, 0.85) 0%, rgba(1, 16, 39, 0.95) 100%);

  .infor-item {
    display: flex;
    margin-top: 5px;

    .jiantou {
      width: 100%;
      height: 22px;
    }

    .tongji {
      padding-right: 10px;
    }

    div {
      text-align: center;
      font-size: 14px;
    }

    .infor-left {
      flex: 2;
      display: flex;
      justify-content: center;
      /* 子元素向右对齐 */
    }

    .infor-center {
      flex: 2;
    }

    .infor-right {
      flex: 3;
    }
  }

  .unit {
    width: 100%;
    text-align: center;
    font-family: SourceHanSansCN;
    font-weight: 400;
    font-size: 12px;
    color: #FFFFFF;
    opacity: 0.7;
  }
}

.active-left {
  position: absolute;
  top: -2px;
  left: 0;
  width: 20px;
  height: 2px;
  background-color: #32C8FF;
}

.active-right {
  position: absolute;
  top: -2px;
  right: 0;
  width: 20px;
  height: 2px;
  background-color: #32C8FF;
}
</style>
